<template>
    <div class="fontc4 tl white pay bgwhite">
        <div class="fontc0 tl pay">
            <mt-header fixed title="充值">
                <router-link to="/mine" slot="left">
                    <mt-button icon="back"> </mt-button>
                </router-link>
            </mt-header>
            <main class="mt40 fontc1 pl10 pr10 bgwhite" v-show="allDone">
                <div class="method pt10">
                    
                    <div class="way lh40 clearfix">
                        <span
                            :key="i"
                            v-for="(way,i) in payways"
                            class="fs16 ml20 fl bold"
                            @click="toggleWay(way)"
                            :class="{red:curWay.pay_type===way.pay_type}">
                                {{way.show_name}}
                        </span>
                    </div>
                    <div class="mt20 wrap">
                        <div class="channel">
                            <ul class="clearfix lh30 fs14">
                                <li class="fl bold label">支付通道:</li>
                                <li
                                    class="fl fontc2 clearfix"
                                    v-show="curWay.pay_type===way.pay_type"
                                    v-for="(way,i) in payways"
                                    :key="i">
                                        <h5>{{way.show_name}}</h5>
                                        <section
                                            class="fl ml10 pl10 pr10"
                                            :class="{red:channel===curChannel}"
                                            @click="toggleChannel(channel)"
                                            v-for="(channel,idx) in way.pay_platform"
                                            :key="idx">
                                                <span>{{channel.pay_name}}</span>
                                        </section>
                                </li>
                            </ul>
                        </div>
                        <div class="bank clearfix lh30 fs14 mt10" v-show="curWay.pay_type==='BankT'">
                            <strong class="fl bold label">合作银行:</strong>
                            <span @click="bankpicervisible=true" class="ml10 fontc2">{{userbankinfo.issuingbankName?userbankinfo.issuingbankName:'未绑定银行卡'}}</span>
                            <span class="iconfont icon-zhankaixia fontc3"></span>
                        </div>
                        <div class="money clearfix lh30 fs14 mt10">
                            <strong class="fl bold label">金额(¥):</strong>
                            <input
                                class="fl ml10 fs14 fontc0"
                                type="number"
                                ref="ipt"
                                v-model="curAmount"
                                :placeholder="'单笔最低'+curChannel.single_floor+'，最高'+curChannel.single_ceiling">
                        </div>
                        <div class="amount flex lh30 fs14 mt10">
                            <strong class="label bold">金额选择:</strong>
                            <div
                                class="flex1 fontc2 pl5 pr5 mr10 mb5"
                                >
                                <span
                                    class="mr10 fs14"
                                    :class="{select:curAmount===item}"
                                    :key="idx"
                                    @click="toogleAmount(item)"
                                    v-for="(item,idx) in amount"
                                    >
                                    {{item|formatMoney}}
                                </span>
                            </div>
                        </div>
                    </div>
                    <mt-button size="large" type="danger" @click="deposit">下一步</mt-button>
                </div>
            </main>
            <div v-show="showBankT">
                <BankT :banktinfo="banktinfo" />
            </div>
            <div class="bank-picker" v-show="bankpicervisible">
                <transition name="slide-fade">
                    <section class="bgwhite" v-show="bankpicervisible">
                        <div class="flex lh50 fs16 title tc">
                            <span class="fl fontc1 ml20 iconfont icon-fanhuizuo" @click="bankpicervisible=false"></span>
                            <span class="fontc0 flex1">请选择银行卡</span>
                        </div>
                        <ol>
                            <li
                                class="lh50 fs16 fontc0 ml20 mr20"
                                @click.stop="toggleBank(item)"
                                :key="i"
                                v-for="(item,i) in banklist">
                                <img class="fl ml20" :src="item.icon" alt="">
                                <span class="ml20">
                                    <i>{{item.name}}</i>
                                    <i class="fr mr30 red" v-show="item.name===userbankinfo.issuingbankName">✓</i>
                                </span>
                            </li>
                        </ol>
                    </section>
                </transition>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import BankT from "./BankT";
import {
  MessageBox,
  Indicator,
  Toast,
  Button,
  TabContainer,
  TabContainerItem
} from "mint-ui";
import accounting from "accounting";

//account的配置更改
accounting.settings = {
  currency: {
    symbol: "", // default currency symbol is '$'
    format: "%s%v", // controls output: %s = symbol, %v = value/number (can be object: see below)
    decimal: ".", // decimal point separator
    thousand: ",", // thousands separator
    precision: 2 // decimal places
  },
  number: {
    precision: 2, // default precision on numbers is 0
    thousand: ",",
    decimal: "."
  }
};

export default {
  name: "Pay",
  data() {
    return {
      allDone: false,
      paying: false,
      payways: [],

      curWay: {},
      curChannel: {},
      curAmount: null,
      amount: [],

      userbankinfo: {},
      banklist: [],
      curBank: {},
      bankpicervisible: false,

      showBankT:false,
      banktinfo: {},
    };
  },
  created() {
    // this.findPayWays();
    // this.getUserBankInfo();
    // this.getCommandAmount();
    this.getPayConfig();
  },
  mounted() {
    this.$refs.ipt.focus();
  },
  components: {
    "mt-tab-container": TabContainer,
    "mt-tab-container-item": TabContainerItem,
    BankT,
  },
  methods: {
    getPayConfig() {
      Indicator.open({
        text: "请稍候...",
        spinnerType: "fading-circle"
      });
      function findPayWays() {
        return axios.post("/user/payment/findPayWays.do?terminalId=2");
      }
      function findUserBankInfo() {
        return axios.post("/user/user/showAuthentication.do");
      }
      function getCommandAmount() {
        return axios.post("/user/finance2/getCommandAmount.do");
      }
      axios
        .all([findPayWays(), findUserBankInfo(), getCommandAmount()])
        .then(
          axios.spread((payways, bankinfo, amount) => {
            Indicator.close();
            this.allDone = true;
            payways = payways.data;
            bankinfo = bankinfo.data;
            amount = amount.data;
            if (
              payways.code === 200 &&
              bankinfo.code === 200 &&
              amount.code === 200
            ) {
              //req1
              this.payways = payways.data;
              // 设置默认的支付方式，
              this.curWay = this.payways[0];
              // 设置默认通道
              this.curChannel = this.payways[0]["pay_platform"][0];
              if (this.curWay.pay_type === "BankT") {
                this.findPayBanks();
              }
              //req2
              this.userbankinfo = bankinfo.data;
              //req3
              this.amount = amount.msg.split(",");
            } else {
              MessageBox("支付", "支付请求出错");
            }
          })
        )
        .catch(() => {
          Indicator.close();
          MessageBox("支付", "支付请求出错");
        });
    },
    findPayBanks() {
      axios({
        methods: "get",
        url: "/user/payment/findPayBanks.do",
        params: { paymentCode: this.curChannel.pay_id }
      }).then(res => {
        res = res.data;
        if (res.code === 200) {
          this.banklist = res.data;
        } else {
          MessageBox("获取支付银行", res.msg);
        }
      });
    },
    deposit() {
      console.log(this.curAmount);
      console.log(this.curChannel["pay_id"]);
      console.log(this.userbankinfo.bankId);
      if (!this.curAmount) {
        Toast("请输入充值金额");
        return;
      }
      if (!this.curChannel["pay_id"]) {
        Toast("pay_id 无效");
        return;
      }
      if (!this.userbankinfo.bankId) {
        MessageBox.confirm("请先绑定银行卡").then(action => {
          this.$router.push({
            path: "/account/bindbank?cb=/account/bindbank"
          });
        });
        return;
      }
      if (this.paying) {
        return;
      }
      this.paying = true;
      Indicator.open({
        text: "提交中...",
        spinnerType: "fading-circle"
      });
      axios({
        methods: "post",
        url: "/user/payment/deposit.do",
        params: {
          money: this.curAmount,
          payManageCode: this.curChannel["pay_id"],
          terminalId: 2,
          bankId: this.userbankinfo.bankId
        }
      })
        .then(res => {
          Indicator.close();
          this.paying = false;
          res = res.data;
          if (res.code === 200) {
            switch (this.curWay.pay_type) {
              case "BankT":
                res.data.money = this.curAmount;
                this.banktinfo = res.data;
                this.showBankT = true;
                break;
              case "Alipay":
                if (res.type === "url") {
                  window.location.href = res.data;
                } else {
                  MessageBox("Alipay", "Alipay 非url的支付方式");
                }
                break;
              case "AlipayT":
                if (res.type === "url") {
                  window.location.href = res.data;
                } else {
                  MessageBox("AlipayT", "Alipay 非url的支付方式");
                }
                break;
              default:
                MessageBox("支付", "暂未支持的支付方式，请联系技术人员");
                break;
            }
          } else {
            MessageBox("支付", res.msg);
          }
        })
        .catch(() => {
          Indicator.close();
          this.paying = false;
          MessageBox("支付", "请求出错");
        });
    },
    toggleWay(way) {
      if (way) {
        this.curWay = way;
        this.curChannel = way["pay_platform"][0];
        if (this.curWay.pay_type === "BankT") {
          this.findPayBanks();
        }
      }
    },
    toggleChannel(channel) {
      if (channel) {
        this.curChannel = channel;
      }
    },
    toogleAmount(amount) {
      if (amount) {
        this.curAmount = amount;
      }
    },
    toggleBank(bank) {
      if (bank) {
        this.curBank = bank;
        this.bankpicervisible = false;

        this.userbankinfo = {
          bankid: this.curBank.id,
          issuingbankName: this.curBank.name
        };
      }
    }
  },
  filters: {
    formatMoney(money) {
      if (money) {
        return accounting.formatMoney(money);
      } else {
        return "0";
      }
    }
  }
};
</script>
<style scoped>
.way {
  border: 1px solid #e2e2e2;
  box-shadow: 0 0 5px #e2e2e2;
  border-radius: 20px;
}
main .wrap {
  box-shadow: 0 0 5px #e2e2e2;
  border-radius: 4px;
  padding: 10px;
}
.channel section {
  border: 1px solid transparent;
}
.channel section.red {
  border: 1px solid #e94c4b;
  border-radius: 4px;
  position: relative;
}
.channel section.red::after {
  content: "✓";
  width: 12px;
  height: 12px;
  background-color: #e94c4b;
  color: #fff;
  line-height: 12px;
  border-bottom-left-radius: 4px;
  position: absolute;
  top: 0;
  right: 0;
}
.label {
  width: 66px;
}
.money input {
  border: 0 none;
  height: 20px;
  line-height: 20px;
  margin-top: 5px;
  min-width: 200px;
}

.amount span {
  border: 1px solid #eee;
  border-radius: 4px;
  min-width: 80px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  margin-bottom: 10px;
  text-align: center;
  position: relative;
}
.amount span.select {
  border-color: #e94c4b;
}
.amount span.select::after {
  content: "✓";
  width: 12px;
  height: 12px;
  background-color: #e94c4b;
  color: #fff;
  line-height: 12px;
  border-bottom-left-radius: 4px;
  position: absolute;
  top: 0;
  right: 0;
}
.red {
  color: #e94c4b;
}
.bank-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.bank-picker section {
  height: 50%;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.bank-picker .title {
  border-bottom: 1px solid #e2e2e2;
  position: relative;
}
.bank-picker .title span:first-child {
  position: absolute;
}
.bank-picker .title span.flex1 {
  width: 100%;
}
.bank-picker section ol {
  height: 100%;
  overflow-y: scroll;
}
.bank-picker li {
  border-bottom: 1px solid #e2e2e2;
}
.bank-picker img {
  height: 40px;
  margin-top: 5px;
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(100%);
}

.slide-fade1-enter-active {
  transition: all 0.3s ease;
}
.slide-fade1-leave-active {
  transition: all 0.3s ease;
}
.slide-fade1-enter,
.slide-fade1-leave-to {
  transform: translateX(100%);
}
</style>
